<template>
  <div :class="{'card-container': true, shadow: showShadow}">
    <div v-if="showHeader" class="card-container-header" :class="headerClassName">
      <slot name="header" />
    </div>
    <div class="card-container-body" :class="bodyClassName">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: 'CardContainer',
  props: {
    headerClassName: {
      type: String,
      default: ''
    },
    bodyClassName: {
      type: String,
      default: ''
    },
    showShadow: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    showHeader() {
      return this.$scopedSlots.header instanceof Function
    }
  }
}
</script>
<style lang="scss" scoped>
    .card-container{
        border-radius: 4px;
        background-color: white;
        overflow: hidden;
        .card-container-header{
            padding: 5px 10px;
            box-sizing: border-box;
            border-bottom: 1px solid rgba(247,247,247,1);
        }
        .card-container-body{
            padding: 10px 10px 5px 10px;
        }
    }
    .shadow{
      box-shadow: 0px 0px 4px 4px #eee;
    }
</style>
